<template>
    <div class="layout">
        <ZWArticlesHeader v-if="isRenderAH" v-bind="articlesData" />
        <div class="container">
            <ZWGroup
                ref="GroupingRef"
                :type="27"
                :group-id="group_id"
                :auth-code="authCode"
                :get-group-fun="handleGetGroupList"
                @submit="handleGroupSubmit" />
            <!-- type=27收集表 -->
            <div class="container_right">
                <ZwSearchForm
                    row-num="3"
                    :option="searchOption"
                    @search="search"
                    @reset="reset"
                    @expand="expandHandle" />
                <ZwTable
                    ref="tableRef"
                    class="table-box"
                    close-loading
                    :option="tableOption"
                    :tab-h="`calc(100vh - 290px - ${state.searchHeight})`"
                    :row-key="getRowKey"
                    :fetch-params="state.searchParams"
                    :fetch-api="fetchApi()"
                    @select="onSelect"
                    @selection-change="onSelectionChange"
                    @select-all="onSelectAll"
                    @dataChange="dataChange">
                    <template #headerOperateLeft>
                        <ZwShareAccountConfiguration
                            :is-show-mini-app="false"
                            :type="11"
                            :no-need-loading="true"
                            @auth="fissionAuth" />
                    </template>
                    <template #headerOperate>
                        <el-dropdown class="dropdown_btn">
                            <el-button plain :disabled="tableData == 0">
                                批量操作
                                <el-icon class="el-icon--right"><arrow-down /> </el-icon>
                            </el-button>
                            <template #dropdown>
                                <!-- todo:权限 -->
                                <el-dropdown-menu>
                                    <!-- <el-dropdown-item
                                        v-auth="'BATCH_BEGAN_COLLECTIONTABLE'"
                                        :disabled="!checkList.length"
                                        @click="onChange(1)">
                                        批量开始
                                    </el-dropdown-item> -->
                                    <el-dropdown-item
                                        v-auth="'BATCH_OVER_COLLECTIONTABLE'"
                                        :disabled="!checkList.length"
                                        @click="handlePromptDialog(2, checkList)">
                                        批量结束
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                        v-auth="'BATCH_DOWNLOAD_COLLECTIONTABLE'"
                                        :disabled="!checkList.length"
                                        @click="handlePromptDialog(3, checkList)">
                                        批量下载
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                        v-auth="'BATCH_DEL_COLLECTIONTABLE'"
                                        :disabled="!checkList.length"
                                        @click="handlePromptDialog(4, checkList)">
                                        批量删除
                                    </el-dropdown-item>
                                    <!-- todo:批量转移分组 -->
                                    <el-dropdown-item
                                        v-auth="'BATCH_TRANSFORM_COLLECTIONTABLE'"
                                        :disabled="!checkList.length"
                                        @click="handlePromptDialog(1, checkList)">
                                        批量转移分组
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                        v-auth="'BATCH_EXPORTS_COLLECTIONTABLE'"
                                        :disabled="!checkList.length"
                                        @click="handlePromptDialog(5, checkList)">
                                        批量导出明细
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        <el-button v-auth="'ADD_COLLECTIONTABLE'" type="primary" @click="toCreateActivity">
                            新建收集表
                        </el-button>
                    </template>
                </ZwTable>
            </div>
        </div>
    </div>
    <!-- 删除弹框 -->
    <!-- <ZWDeletdialog ref="DeletdialogRef" @submit="onSubmit" @cancel="onCancel" /> -->
    <PromptDialog ref="PromptDialogRef" @confirm="handlePromptConfirm"></PromptDialog>
    <!-- 推广弹框 -->
    <ZwShareConfiguration ref="shareConfigurationRef" />
    <el-drawer v-model="drawerVisible" title="预览" size="40%">
        <PreviewForm
            v-if="drawerVisible"
            ref="previewFormRef"
            :control-card-columns="controlCardColumns"
            :cover-image="coverImage"
            :activity_data="activityData"
            :submit-info="submitInfo" />
    </el-drawer>
</template>

<script lang="tsx">
import { defineComponent } from 'vue';
// 定义name专用script标签
// eslint-disable-next-line vue/component-definition-name-casing
export default defineComponent({ name: 'CONTENT_HIHG_COLLECTION_TABLE' });
</script>

<script setup lang="tsx">
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
// import ZwTable from '@/components/zw/table/Table';
import ZwTable from '@/components/zw/table1.0/Table';
import ZWDeletdialog from '@/components/ZWDeletdialog.vue';
import PromptDialog from './components/PromptDialog.vue';
import ZWGroup from '@/components/ZWGroup.vue';
import ZWArticlesHeader from '@/components/ZWArticlesHeader.vue';
import ShareAccountConfiguration from '@/components/common/ShareAccountConfiguration.vue';
import ShareConfiguration from './components/ShareConfiguration.vue';
import PreviewForm from './components/PreviewForm/index.vue';
// import { getMarketinGroupgList } from '@/api/smartMarketing/group'
import { getGroupList } from '@/api/concreation';
import { getCreateList } from '@/api/common';
import useClipboard from 'vue-clipboard3';
import { ElMessage, ElImage, ElIcon, ElButton, ElTooltip } from 'element-plus';
import { Picture as IconPicture } from '@element-plus/icons-vue';
import {
    funAllList,
    delList,
    closeList,
    startList,
    downloadList,
    exportDetail,
    showCollectTable
} from '@/api/highMaterial/collectionTable';
import { ref, reactive, computed, onActivated, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { deepCopy } from '@/utils/helper';
import { StatusColor, DOWLOAD_FILE } from '@/utils/smartMarketing';
import { useStore } from '@/store';
import { useRoute } from 'vue-router';
import { handleFormConfigData, handleFormConfigDataToView } from './detail/components/utils/DataProcessing';

const store = useStore();
const route = useRoute();
const DeletdialogRef: any = ref(null);
const PromptDialogRef: any = ref();
const router = useRouter();
const GroupingRef: any = ref(null);
const isShow = ref(0);
const singleVal = ref<any>(''); // 2-单个
const checkList = ref([]);
const delId = ref([]);
const tableData = ref(0);
const requestFlag = ref<boolean>(false);
const currentParams = ref<any>(null);
const group_id = ref<number | string>('all');
const defaultParams = {
    group_id: group_id.value || 0,
    keyword: '', //活动标题
    work_user_id: '', //创建人id
    type: 0, //活动状态 0-全部 1-未开始 2-进行中 3-已结束 4-提前结束
    period_time: [], //活动时间
    created_at: [] // 结束时间
};
const authInfo = ref<any>(null);

// 分组权限code码
const authCode = {
    add: 'ADD_CHILD_GROUP',
    edit: 'EDIT_CHILD_GROUP',
    del: 'DEL_CHILD_GROUP'
};
const isRenderAH = ref(false);
const handleGetGroupList = async () => {
    const data = await getGroupList({ type: 27 });
    const { total } = data;
    isRenderAH.value = total <= 0;
    return data;
};
const handleGroupSubmit = (v: any) => {
    tableRef.value.clearSelection();
    group_id.value = v.id;
    currentParams.value = {
        ...deepCopy(defaultParams),
        ...currentParams.value,
        group_id: group_id.value
    };
    state.searchParams = deepCopy(currentParams.value);
};

const articlesData = {
    title: '收集表',
    desc: '可以帮您轻松收集报名信息、完成售后评价、自动为填写客户打上标签等功能。助力企业精细化运营，降低运营成本。',
    url: '/static/collectTable/collect-table.png'
};
// 复制
const { toClipboard } = useClipboard();
const onCopy = async (v: any) => {
    try {
        await toClipboard(v);
        ElMessage.success('复制成功');
    } catch (e) {
        ElMessage.error('复制失败');
    }
};

const tableRef = ref<HTMLElement | any>(null);
const state = reactive({
    searchParams: deepCopy(defaultParams),
    searchHeight: '112px'
});
const searchOption = computed(() => {
    return [
        {
            label: '活动标题',
            name: 'keyword',
            value: '',
            type: 'input',
            placeholder: '请输入活动标题'
        },
        {
            label: '活动状态',
            name: 'type',
            value: '',
            type: 'select',
            placeholder: '请选择',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    setTimeout(() => {
                        resolve([
                            { name: '全部', id: 0 },
                            { name: '未开始', id: 1 },
                            { name: '进行中', id: 2 },
                            { name: '已结束', id: 3 }
                            // { name: '提前结束', id: 4 }
                        ]);
                    }, 300);
                });
            },
            formatOption: (v: any) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '活动时间',
            name: 'period_time',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            // datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期'
        },
        {
            label: '创建人',
            name: 'work_user_id',
            value: [],
            multiple: true,
            type: 'select',
            filterable: true,
            placeholder: '请选择创建人',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    getCreateList({}).then((res: any) => {
                        const targetArr = res.map((item: any) => {
                            item.name = `${item.name}  (${item.phone})`;
                            return item;
                        });
                        resolve(targetArr);
                    });
                });
            },
            formatOption: (v: any) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '创建时间',
            name: 'created_at',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            // datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期'
        }
    ];
});
const search = (v: any) => {
    tableRef.value.clearSelection();
    checkList.value = [];
    currentParams.value = {
        ...deepCopy(defaultParams),
        ...v,
        group_id: group_id.value
    };
    state.searchParams = deepCopy(currentParams.value);
};
const reset = (v: any) => {
    tableRef.value.clearSelection();
    checkList.value = [];
    currentParams.value = {
        ...deepCopy(defaultParams),
        group_id: group_id.value
    };
    state.searchParams = deepCopy(currentParams.value);
};

/**
 * @description: 展开收起
 */
const expandHandle = (expand: boolean) => {
    state.searchHeight = expand ? '112px' : '64px';
};

// 获取配置权限
const fissionAuth = (val: any) => {
    !!val && (authInfo.value = val);
};

const onDownload = async (row: any) => {
    const res = await downloadList({ id: [row.id] });
    DOWLOAD_FILE(res.url, res.name);
};
const onBtn = (row: any) => {
    switch (row.status_name) {
        case '未开始': // 未开始
            return (
                <>
                    <ElButton
                        size="small"
                        onClick={() => {
                            delId.value = [row.id];
                            onChange(1);
                        }}>
                        开始
                    </ElButton>
                    <ElButton
                        size="small"
                        onClick={() => {
                            router.push({
                                path: '/content/highMaterial/collectionTable/detail',
                                query: { type: 'edit', id: row.id }
                            });
                        }}>
                        编辑
                    </ElButton>
                    <ElButton
                        size="small"
                        onClick={() => {
                            delId.value = [row.id];
                            onChange(3, 2);
                        }}>
                        下载
                    </ElButton>
                    <ElButton
                        size="small"
                        onClick={async () => {
                            onCopy(row.form_url);
                        }}>
                        复制
                    </ElButton>
                    <ElButton
                        size="small"
                        onClick={() => {
                            delId.value = [row.id];
                            onChange(4);
                        }}>
                        删除
                    </ElButton>
                    <ElButton
                        size="small"
                        onClick={() => {
                            checkList.value = [row.id];
                            onChange(5, 2);
                        }}>
                        导出
                    </ElButton>
                </>
            );
        case '进行中': // 进行中
            return (
                <>
                    <ElButton
                        size="small"
                        onClick={() => {
                            delId.value = [row.id];
                            onChange(2);
                        }}>
                        结束
                    </ElButton>
                    <ElButton
                        size="small"
                        onClick={() => {
                            delId.value = [row.id];
                            onChange(3, 2);
                        }}>
                        下载
                    </ElButton>
                    <ElButton
                        size="small"
                        onClick={async () => {
                            onCopy(row.form_url);
                        }}>
                        复制
                    </ElButton>
                    <ElButton
                        size="small"
                        onClick={() => router.push(`/content/highMaterial/collectionTable/statistics?id=${row.id}`)}>
                        统计
                    </ElButton>
                    <ElButton
                        size="small"
                        onClick={() => {
                            delId.value = [row.id];
                            onChange(4);
                        }}>
                        删除
                    </ElButton>
                    <ElButton
                        size="small"
                        onClick={() => {
                            checkList.value = [row.id];
                            onChange(5, 2);
                        }}>
                        导出
                    </ElButton>
                </>
            );
        case '已结束': // 已结束
        case '提前结束':
            return (
                <>
                    <ElButton
                        size="small"
                        onClick={() => router.push(`/content/highMaterial/collectionTable/statistics?id=${row.id}`)}>
                        统计
                    </ElButton>
                    <ElButton
                        size="small"
                        onClick={async () => {
                            delId.value = [row.id];
                            onChange(4);
                        }}>
                        删除
                    </ElButton>
                    <ElButton
                        size="small"
                        onClick={() => {
                            checkList.value = [row.id];
                            onChange(5, 2);
                        }}>
                        导出
                    </ElButton>
                </>
            );
    }
};
// 状态颜色
const StatusColorOption = {
    未开始: '#EAEAEA',
    进行中: '#2FB6E4',
    已结束: '#F14144',
    提前结束: '#ff0004'
};
// 表格
const tableOption = [
    {
        type: 'selection',
        width: 55,
        fixed: 'left',
        reserveSelection: true
    },
    {
        prop: 'title',
        label: '活动标题',
        fixed: 'left',
        minWidth: 130,
        render({ row }: any) {
            return (
                <div class="preview-title" onClick={() => handlePreview(row)}>
                    {row.title}
                </div>
            );
        }
    },
    {
        prop: 'count_user',
        label: '填写人数/份数',
        minWidth: 130,
        render({ row }: any) {
            return (
                <div>
                    {row.count_user || 0} / {row.count_submit}
                </div>
            );
        }
    },
    {
        prop: 'status_name',
        label: '活动状态',
        width: 150,
        render({ row }) {
            return (
                <ElTooltip
                    placement="top"
                    disabled={![3, 4].includes(row.status)}
                    v-slots={{
                        content: () => {
                            return (
                                <>
                                    结束方式：{row.status == 4 ? '手动结束' : '自动结束'}
                                    <br />
                                    结束时间：{row.actual_end_time || '--'}
                                    <br />
                                    操作人：
                                    {row.end_operator_name
                                        ? row.end_operator_id == 0
                                            ? '--'
                                            : row.end_operator_name
                                        : '--'}
                                    <br />
                                </>
                            );
                        }
                    }}>
                    <span
                        class="status-point"
                        style={{
                            '--status-bgcolor': StatusColorOption[row.status_name] || '#D8D8D8'
                        }}>
                        {row.status_name === '提前结束' ? '已结束' : row.status_name}
                    </span>
                </ElTooltip>
            );
        }
    },
    // {
    //     prop: 'qr_code_link',
    //     label: '二维码',
    //     align: 'center',
    //     minWidth: 100,
    //     render({ row }: any) {
    //         const slotError = () => (
    //             <div class="image-slot">
    //                 <ElIcon>
    //                     <IconPicture />
    //                 </ElIcon>
    //             </div>
    //         );
    //         return (
    //             <>
    //                 <ElImage
    //                     preview-src-list={[row.qr_code_link]}
    //                     preview-teleported={true}
    //                     src={row.qr_code_link}
    //                     style="width: 48px; height: 48px; font-size: 49px"
    //                     vSlots={{ error: slotError }}
    //                 />
    //             </>
    //         );
    //     }
    // },
    // {
    //     prop: 'count_user',
    //     label: '填写人数',
    //     width: 170
    // },
    // {
    //     prop: 'count_submit',
    //     label: '收集表份数',
    //     align: 'center',
    //     width: 100
    // },
    {
        prop: 'effective_time',
        label: '活动时间',
        width: 200,
        render({ row }: any) {
            return (
                <>
                    {row.period_type == 1 ? (
                        '永久'
                    ) : (
                        <div>
                            <p>{row.begin_date} 至</p>
                            <p>{row.end_date}</p>
                        </div>
                    )}
                </>
            );
        }
    },
    {
        prop: 'group_name',
        label: '所属分组',
        width: 150
    },
    {
        prop: 'created_at', // todo:创建时间
        label: '创建时间',
        width: 180
    },
    {
        prop: 'creater_name',
        label: '创建人',
        width: 150
    },
    // {
    //     prop: 'activity_status',
    //     label: '状态',
    //     width: 100,
    //     align: 'center',
    //     render({ row }: any) {
    //         return (
    //             <span style={StatusColor(row.status_name, 'obj')?.color}>
    //                 {StatusColor(row.status_name, 'obj')?.name}
    //             </span>
    //         );
    //     }
    // },
    {
        prop: 'operate',
        label: '操作',
        width: 210,
        fixed: 'right',
        isOperate: true,
        //1:未开始 2:进行中 3:已结束 4:提前结束
        option: [
            {
                name: '编辑',
                isRender: ({ row }: any) => [1, 2].includes(row.status),
                click: (row: any) => handleEdit(row)
            },
            {
                name: '复制',
                isRender: ({ row }: any) => [1, 2, 3, 4].includes(row.status),
                click: (row: any) => handleCopy(row)
            },
            {
                name: '推广',
                isRender: ({ row }: any) => [1, 2].includes(row.status),
                click: (row: any) => handlePromote(row)
            },
            {
                name: '查看',
                isRender: ({ row }: any) => [1, 2, 3, 4].includes(row.status),
                click: (row: any) => handleView(row)
            },
            {
                name: '删除',
                isRender: ({ row }: any) => [1, 3, 4].includes(row.status),
                click: (row: any) => handlePromptDialog(4, [row.id], row)
            },
            {
                name: '结束',
                isRender: ({ row }: any) => [2].includes(row.status),
                click: (row: any) => handlePromptDialog(2, [row.id], row)
            },
            {
                name: '数据',
                isRender: ({ row }: any) => [2, 3, 4].includes(row.status),
                click: (row: any) => handleData(row)
            }
            // {
            //     name: '提前结束',
            //     authCode: 'END',
            //     isRender: ({ row }: any) =>
            //         row.activity_status !== 1 && row.activity_status !== 3 && row.activity_status !== 4,
            //     click: (row: any) => toForward(row)
            // },
            // {
            //     name: '数据分析',
            //     authCode: 'STATISTICS',

            //     isRender: ({ row }: any) => row.activity_status !== 1,
            //     click: (row: any) => openRecord(row)
            // }
        ]
    }
];

const dataChange = (res: any) => {
    tableData.value = res.total;
};

const getRowKey = (row: any) => {
    return row.id;
};

const fetchApi = () => {
    // 获取文件列表
    // return getFissionList
    return funAllList;
};
// 选中表格 checkbox
const onSelect = (selection, row) => {
    if (selection.constructor === Array) checkList.value = selection.map(v => v.id);
};
// 选择项变更
const onSelectionChange = selection => {};
// 全选
const onSelectAll = selection => {
    checkList.value = selection.map(v => v.id);
};
// 刷新表格
const reloadTable = () => {
    tableRef.value.reload();
};
// 导出表格数据
const exportTableData = () => {
    const params = {
        ...state.searchParams,
        id: checkList.value
    };
    exportDetail(params).then((res: any) => {
        window.location.href = res.url;
        if (singleVal.value != 2) {
            checkList.value = [];
            tableRef.value.clearSelection();
        }
        DeletdialogRef.value.appDialog.visible = false;
    });
};
// 预览
const drawerVisible = ref<boolean>(false);
const previewFormRef = ref<any>();
const controlCardColumns = reactive<Array<any>>([]);
const coverImage = ref('');
// const formDesc = ref('');
// const activityName = ref('');
const activityData = reactive({});
const submitInfo = reactive({});
const handlePreview = async row => {
    const res = await showCollectTable({
        id: row.id
    });
    const detailInfo = res || {};
    const { config } = detailInfo;
    const formConfigData = handleFormConfigDataToView(config);
    const formDataList: any = [...formConfigData];
    const fileList: any = detailInfo.cover_image ? [{ url: detailInfo.cover_image }] : [];
    const form_desc: any = detailInfo.desc;
    // formDesc.value = detailInfo.desc;
    // activityName.value = detailInfo.activityName;
    Object.assign(activityData, {
        form_desc: detailInfo?.desc,
        activity_name: detailInfo?.activity_name,
        period_type: detailInfo?.period_type,
        endTime: detailInfo?.end_date
    });
    Object.assign(submitInfo, {
        ads: detailInfo?.ads,
        conclusion: detailInfo?.conclusion,
        submit_settings: detailInfo?.submit_settings
    });
    const columns: any = {
        desc: form_desc.value,
        cover_image: fileList?.[0]?.url,
        form: handleFormConfigData(formDataList)
    };
    controlCardColumns.length = 0;
    controlCardColumns.push(...columns.form);
    coverImage.value = columns.cover_image;
    drawerVisible.value = true;
    nextTick(() => {
        previewFormRef.value.setState(false);
    });
};
// 编辑
const handleEdit = row => {
    router.push({
        path: '/content/highMaterial/collectionTable/detail',
        query: { type: 'edit', id: row.id }
    });
};
// 复制
const handleCopy = row => {
    // todo:复制
    // group_id: group_id.value === 'all' ? 0 : group_id.value
    router.push({
        path: '/content/highMaterial/collectionTable/detail',
        query: { type: 'copy', id: row.id }
    });
};
// 推广
const shareConfigurationRef = ref();
const handlePromote = row => {
    if (!authInfo.value?.official_account_id) {
        ElMessage.warning('收集表活动需要配置公众号，请先在列表左上角完成配置');
        return;
    }
    shareConfigurationRef?.value?.open(row);
};
// 查看
const handleView = row => {
    // todo:查看预览
    router.push({
        path: '/content/highMaterial/collectionTable/detail',
        query: { type: 'view', id: row.id }
    });
};
// 删除
// const handleDelete = row => {
//     delId.value = [row.id];
//     onChange(4);
// };
// // 结束
// const handleEnd = row => {
//     delId.value = [row.id];
//     onChange(2);
// };
// 数据
const handleData = row => {
    router.push(`/content/highMaterial/collectionTable/statistics?id=${row.id}`);
};

const handlePromptDialog = (type: any, ids = [], row = {}) => {
    if (type == 3 && !authInfo.value?.official_account_id) {
        ElMessage.warning('收集表活动需要配置公众号，请先在列表左上角完成配置');
        return;
    }
    PromptDialogRef.value.open(type, ids, row);
};

// 批量设置弹窗确定回调
const handlePromptConfirm = async (type: any) => {
    // 1转移分组，2结束，3下载，4删除，5导出
    if ([1, 4].includes(type)) {
        await GroupingRef.value.getGroup(27);
    }
    if (!(type == 3 && singleVal.value == 1)) {
        checkList.value = [];
        tableRef.value.clearSelection();
    }
    tableRef.value.reload();
};

const onChange = (num: number, type?: number) => {
    //1转移分组，2结束，3下载，4删除，5导出
    switch (num) {
        case 1:
            DeletdialogRef.value.appDialog.title = '开始提醒';
            DeletdialogRef.value.content = '确认开始当前活动吗？';
            break;
        case 2:
            DeletdialogRef.value.appDialog.title = '结束提醒';
            DeletdialogRef.value.content = '确认结束当前活动吗？';
            break;
        case 3:
            DeletdialogRef.value.appDialog.title = '下载提醒';
            DeletdialogRef.value.content = '确认下载所选活动吗？';
            break;
        case 4:
            DeletdialogRef.value.appDialog.title = '删除提醒';
            DeletdialogRef.value.content = '确认删除所选活动吗？';
            break;
        case 5:
            DeletdialogRef.value.appDialog.title = type == 1 ? '批量导出明细' : '导出明细';
            // eslint-disable-next-line no-case-declarations
            const str = `<span>您即将导出<span class="text_num" style='color: #ff6b00'>${
                checkList.value.length ? checkList.value.length : tableData.value
            }</span>条数据，确认导出吗？</span>`;
            DeletdialogRef.value.content = str;
            break;
    }
    isShow.value = num;
    singleVal.value = type || '';
    DeletdialogRef.value.appDialog.visible = true;
};
const onSubmit = async () => {
    const params = delId.value.length ? delId.value : checkList.value;
    switch (
        isShow.value //1开始，2结束，3下载。4删除
    ) {
        case 1:
            store.commit('user/setApiList', [
                '/scrm-api/console/media/content/collect/batch-start',
                '/scrm-api/console/media/content/collect/list'
            ]);
            await startList({ id: params });
            ElMessage.success('活动开始成功');
            delId.value = [];
            checkList.value = [];
            DeletdialogRef.value.appDialog.visible = false;
            tableRef.value.clearSelection();
            tableRef.value.reload();
            break;
        case 2:
            store.commit('user/setApiList', [
                '/scrm-api/console/media/content/collect/batch-close',
                '/scrm-api/console/media/content/collect/list'
            ]);
            await closeList({ id: params });
            ElMessage.success('活动结束成功');
            delId.value = [];
            checkList.value = [];
            DeletdialogRef.value.appDialog.visible = false;
            tableRef.value.clearSelection();
            tableRef.value.reload();
            break;
        case 3:
            store.commit('user/setApiList', [
                '/scrm-api/console/media/content/collect/batch-download',
                '/scrm-api/console/tenant/group/getLists',
                '/scrm-api/console/media/content/collect/list'
            ]);
            // eslint-disable-next-line no-case-declarations
            const res = await downloadList({ id: params });
            DOWLOAD_FILE(res.url, res.name);
            ElMessage.success('活动下载成功');
            if (singleVal.value != 2) {
                delId.value = [];
                checkList.value = [];
                tableRef.value.clearSelection();
            }
            DeletdialogRef.value.appDialog.visible = false;
            tableRef.value.reload();
            break;
        case 4:
            store.commit('user/setApiList', [
                '/scrm-api/console/media/content/collect/batch-del',
                '/scrm-api/console/tenant/group/getLists',
                '/scrm-api/console/media/content/collect/list'
            ]);
            await delList({ id: params });
            ElMessage.success('删除成功');
            delId.value = [];
            checkList.value = [];
            DeletdialogRef.value.appDialog.visible = false;
            await GroupingRef.value.getGroup(27);
            tableRef.value.clearSelection();
            tableRef.value.reload();
            break;
        case 5:
            exportTableData();
            break;
    }
};
const onCancel = () => {
    // tableRef.value.clearSelection();
    // checkList.value = [];
};

// 新增收集表
const toCreateActivity = () => {
    if (!authInfo.value?.official_account_id) {
        ElMessage.warning('收集表活动需要配置公众号，请先在列表左上角完成配置');
        return;
    }
    router.push({
        path: '/content/highMaterial/collectionTable/detail',
        query: {
            group_id: group_id.value === 'all' ? 0 : group_id.value,
            official_account_id: authInfo.value?.official_account_id
        }
    });
};

store.commit('user/setApiList', [
    '/scrm-api/console/tenant/group/getLists',
    '/scrm-api/console/media/content/collect/list'
]);

onActivated(async (val: any) => {
    // alert('onActivated');
    if (route.query?.group_id) {
        group_id.value = route.query?.group_id;

        // tableRef.value.clearSelection();
        // group_id.value = v.id;
        defaultParams.group_id = route.query?.group_id;
        currentParams.value = {
            ...deepCopy(defaultParams),
            ...currentParams.value,
            group_id: group_id.value
        };
        // state.searchParams = deepCopy(currentParams.value);

        router.push({ query: {} });
    } else {
        await GroupingRef.value.getGroup(27);
    }

    tableRef.value.clearSelection();
    GroupingRef.value.setCurrentSelectId({ id: group_id.value });
    state.searchParams = { ...deepCopy(defaultParams), ...currentParams.value };
});
</script>

<style lang="scss" scoped>
.layout {
    .container {
        display: flex;

        .container_right {
            flex: 1;
            padding: 20px;
            box-sizing: border-box;
            background: #fff;
            border: 1px solid #eaeaea;
            overflow: hidden;

            :deep(.status-point) {
                cursor: default;

                --status-bgcolor: #ffd500;

                &::before {
                    content: '';
                    display: inline-block;
                    width: 8px;
                    height: 8px;
                    margin-right: 8px;
                    background-color: var(--status-bgcolor);
                    border-radius: 4px;
                }
            }

            :deep(.preview-title) {
                &:hover {
                    cursor: pointer;
                    color: #ff6b00;
                }
            }
        }
    }
}

.dropdown_btn {
    margin-right: 10px;
}
</style>
